﻿window.initSvgInteractions = async (svgElement) => {
    let selectedLine = null;
    let dragStart = { x: 0, y: 0 };

    svgElement.addEventListener('mousedown', function (event) {
        const target = event.target.closest('.draggable-line');
        if (target) {
            selectedLine = target;
            dragStart = { x: event.clientX, y: event.clientY };
            event.stopPropagation();
        }
    });

    document.addEventListener('mousemove', function (event) {
        if (selectedLine) {
            const dx = event.clientX - dragStart.x;
            const dy = event.clientY - dragStart.y;
            dragStart = { x: event.clientX, y: event.clientY };

            // 更新直线的x2和y2属性  
            const attrs = selectedLine.attributes;
            const x1 = parseFloat(attrs.getNamedItem('x1').value);
            const y1 = parseFloat(attrs.getNamedItem('y1').value);
            const x2 = parseFloat(attrs.getNamedItem('x2').value) + dx;
            const y2 = parseFloat(attrs.getNamedItem('y2').value) + dy;

            selectedLine.setAttribute('x2', x2.toString());
            selectedLine.setAttribute('y2', y2.toString());

            event.preventDefault();
        }
    });

    document.addEventListener('mouseup', function () {
        selectedLine = null;
    });

    document.addEventListener('mouseleave', function () {
        selectedLine = null;
    });
};